import Table from "@/pages/system/tool/gen/detail/components/Table";
import {useEffect, useRef} from "react";
import {ActionType} from "@ant-design/pro-table/lib/typing";
import {Button, Space} from "antd";
import {history} from "umi";
import CProForm from "@/components/CProForm";
import {CProFormProps} from "@/components/CProForm/type";
import {fields} from "@/pages/system/tool/gen/detail/components/Form/config/fields";
import style from "@/pages/system/tool/gen/detail/styles.less";

export default (props: any) => {
  const formRef = props.formRef;
  formRef.current?.setFieldsValue(props.genDetailInfo);
  const {submit, tableForm, setGenFieldList} = props;
  const tableActionRef = useRef<ActionType>();
  const tableProps = {
    genFieldList: props.genDetailInfo?.genFieldList,
    actionRef: tableActionRef,
    editableFormRef: tableForm,
    setGenFieldList: setGenFieldList
  }

  useEffect(()=>{}, [])


  const proFormProps: CProFormProps = {
    layout: "horizontal",
    // @ts-ignore
    groupList: fields(),
    submitter: {
      resetButtonProps: {
        style: {
          display: "none"
        }
      },
      submitButtonProps: {
        style: {
          display: "none"
        }
      },

      render: (props, dom) => {
        return [
          ...dom,
          <>
            <Space style={{display: "flex", justifyContent: "center", alignItems: "center"}}>
              <Button htmlType="button" type={"primary"} onClick={() => submit()}>保存</Button>
              <Button type={"default"} onClick={() => history.goBack()}>返回</Button>
            </Space>
          </>
        ]
      }
    }
  }

  return (
    <CProForm className={style.form}
      {...props}
      {...proFormProps}
    >
      <Table {...tableProps}/>
    </CProForm>
  )
}
